<template>

<div class="categroy">
    <dl class="m-categroy">
        <dt>按拼音首字母选择:</dt>
        <dd v-for="(item,index) in letter" :key="index">
            <a :href="'#city-' + item">{{item}}</a>
        </dd>
    </dl>
    <dl class="m-categroy-section" v-for="(item, index) in cityGroup" :key="index" :id="'city-' + index">
        <dt>{{index}}</dt>
        <dd>
            <span  v-for="city in item" :key="city.id" @click="choseCity(city)">{{city.name}}</span>
        </dd>
    </dl>
</div>

</template>

<script>
import api from '@/api/index.js';
let datas =  [
      {
        "id": 387,
        "name": "乌鲁木齐",
        "pinyin": "wulumuqi",
        "acronym": "xj",
        "rank": "C",
        "firstChar": "W",
        "nearCity": [
          {'name': '天山区','id':'1'},
          {'name': '水磨沟区','id':'2'},
          {'name': '新市区','id':'3'}
          ]

      },
      {
        "id": 388,
        "name": "克拉玛依",
        "pinyin": "kelamayi",
        "acronym": "klmy",
        "rank": "E",
        "firstChar": "K"
      },
      {
        "id": 389,
        "name": "吐鲁番",
        "pinyin": "tulufan",
        "acronym": "tlf",
        "rank": "Z",
        "firstChar": "T"
      },
      {
        "id": 390,
        "name": "哈密",
        "pinyin": "hami",
        "acronym": "hami",
        "rank": "F",
        "firstChar": "H"
      },
      {
        "id": 391,
        "name": "昌吉",
        "pinyin": "changji",
        "acronym": "changji",
        "rank": "F",
        "firstChar": "C"
      },
      {
        "id": 392,
        "name": "博尔塔拉",
        "pinyin": "boertala",
        "acronym": "betl",
        "rank": "Z",
        "firstChar": "B"
      },
      {
        "id": 393,
        "name": "巴州",
        "pinyin": "bazhou",
        "acronym": "baz",
        "rank": "Z",
        "firstChar": "B"
      },
      {
        "id": 394,
        "name": "阿克苏",
        "pinyin": "akesu",
        "acronym": "aks",
        "rank": "F",
        "firstChar": "A"
      },
      {
        "id": 395,
        "name": "克州",
        "pinyin": "kezhou",
        "acronym": "kz",
        "rank": "Z",
        "firstChar": "K"
      },
      {
        "id": 396,
        "name": "喀什地区",
        "pinyin": "kashi",
        "acronym": "ks",
        "rank": "Z",
        "firstChar": "K"
      },
      {
        "id": 397,
        "name": "和田",
        "pinyin": "hetian",
        "acronym": "ht",
        "rank": "Z",
        "firstChar": "H"
      },
      {
        "id": 398,
        "name": "伊犁",
        "pinyin": "yili",
        "acronym": "yili",
        "rank": "Z",
        "firstChar": "Y"
      },
      {
        "id": 399,
        "name": "塔城",
        "pinyin": "tacheng",
        "acronym": "tac",
        "rank": "Z",
        "firstChar": "T"
      },
      {
        "id": 400,
        "name": "阿勒泰",
        "pinyin": "aletai",
        "acronym": "alt",
        "rank": "Z",
        "firstChar": "A"
      },
      {
        "id": 408,
        "name": "石河子",
        "pinyin": "shihezi",
        "acronym": "shz",
        "rank": "E",
        "firstChar": "S"
      },
      {
        "id": 603,
        "name": "库尔勒",
        "pinyin": "kuerle",
        "acronym": "krl",
        "rank": "E",
        "firstChar": "K"
      },
      {
        "id": 622,
        "name": "伊宁",
        "pinyin": "yining",
        "acronym": "yn",
        "rank": "E",
        "firstChar": "Y"
      },
      {
        "id": 643,
        "name": "奎屯",
        "pinyin": "kuitun",
        "acronym": "kt",
        "rank": "F",
        "firstChar": "K"
      },
      {
        "id": 689,
        "name": "阜康",
        "pinyin": "fukang",
        "acronym": "fukang",
        "rank": "F",
        "firstChar": "F"
      },
      {
        "id": 747,
        "name": "乌苏",
        "pinyin": "wusu",
        "acronym": "wusu",
        "rank": "F",
        "firstChar": "W"
      },
      {
        "id": 762,
        "name": "沙湾",
        "pinyin": "shawan",
        "acronym": "shawan",
        "rank": "F",
        "firstChar": "S"
      },
      {
        "id": 984,
        "name": "库车",
        "pinyin": "kuche",
        "acronym": "kuche",
        "rank": "F",
        "firstChar": "K"
      },
      {
        "id": 1016,
        "name": "阿拉尔",
        "pinyin": "alaer",
        "acronym": "alaer",
        "rank": "F",
        "firstChar": "A"
      },
      {
        "id": 1077,
        "name": "莎车县",
        "pinyin": "shachexian",
        "acronym": "shachexian",
        "rank": "F",
        "firstChar": "S"
      },
      {
        "id": 1117,
        "name": "裕民县",
        "pinyin": "yuminxian",
        "acronym": "yuminxian",
        "rank": "F",
        "firstChar": "Y"
      },
      {
        "id": 1120,
        "name": "鄯善县",
        "pinyin": "shanshanxian",
        "acronym": "shanshanxian",
        "rank": "F",
        "firstChar": "S"
      },
      {
        "id": 1126,
        "name": "阿勒泰市",
        "pinyin": "aletaishi",
        "acronym": "aletaishi",
        "rank": "F",
        "firstChar": "A"
      },
      {
        "id": 1172,
        "name": "额敏县",
        "pinyin": "eminxian",
        "acronym": "eminxian",
        "rank": "F",
        "firstChar": "E"
      },
      {
        "id": 1173,
        "name": "塔城市",
        "pinyin": "tachengshi",
        "acronym": "tachengshi",
        "rank": "F",
        "firstChar": "T"
      },
      {
        "id": 1190,
        "name": "阿图什市",
        "pinyin": "atushishi",
        "acronym": "atushishi",
        "rank": "F",
        "firstChar": "A"
      },
      {
        "id": 1194,
        "name": "精河县",
        "pinyin": "jinghexian",
        "acronym": "jinghexian",
        "rank": "F",
        "firstChar": "J"
      },
      {
        "id": 1237,
        "name": "巴楚县",
        "pinyin": "bachuxian",
        "acronym": "bachuxian",
        "rank": "F",
        "firstChar": "B"
      },
      {
        "id": 1251,
        "name": "沙雅",
        "pinyin": "shaya",
        "acronym": "shaya",
        "rank": "F",
        "firstChar": "S"
      },
      {
        "id": 1257,
        "name": "拜城县",
        "pinyin": "baichengxian",
        "acronym": "baichengxian",
        "rank": "F",
        "firstChar": "B"
      }
    ]
    function compare(pro) {
            return function (obj1, obj2) {
                let val1 = obj1[pro];
                let val2 = obj2[pro];
                if (val1 < val2 ) { //正序
                    return -1;
                } else if (val1 > val2 ) {
                    return 1;
                } else {
                    return 0;
                }
            }
    }
    datas = datas.sort(compare("firstChar"));

export default {

    data(){
        return{
            letter: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
            cityList: [],
            cityGroup: {}
        }
    },
    created(){
        api.getCityList().then((res)=>{
            if(res.data.status == 'success'){
                this.cityList = res.data.data
            }
            this.cityGroup = this.editData()
        })
    },
    methods:{
        editData(){
            let obj = {}
            datas.forEach((item,index)=>{
                if(!obj[item.firstChar.toUpperCase()]){
                    obj[item.firstChar.toUpperCase()] = []
                }
                obj[item.firstChar.toUpperCase()].push(item)
            })
            return obj
        },
        choseCity(city){
          // console.log(city);
          // console.log(this.$store.state.position);

          this.$store.state.position = city;
          this.$router.push('/index')

        }

    }
}
</script>

<style lang="scss">
    @import "@/assets/css/changecity/categroy.scss"
</style>